import React, { PureComponent } from 'react';
import { BorderBox13 } from '@jiaminghi/data-view-react';
import UserBehaviorPie from './charts/UserBehaviorPie.js';
import TopProductsTable from './charts/TopProductsTable.js';
import { CompactModuleTitle } from '../../style/globalStyledSet';
import {
  RightPage,
  RightTopBox,
  RightBottomBox,
} from './style';

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // 用户行为统计饼图数据
      behaviorPieData: [
        { name: '点击行为', value: 64975, color: '#00ffff' },
        { name: '收藏行为', value: 1307, color: '#ff6b9d' },
        { name: '加购物车行为', value: 1895, color: '#ffd700' },
        { name: '购买行为', value: 684, color: '#00ff88' }
      ],

      // Top10商品数据
      topProductsData: [
        { rank: 2, productId: '38445720', clicks: 2279428, favorites: 2333789, cart: 3031354, purchases: 3031354 },
        { rank: 3, productId: '2032668', clicks: 2818406, favorites: 2560262, cart: 2647774, purchases: 2647774 },
        { rank: 4, productId: '2331270', clicks: 2364679, favorites: 2818406, cart: 2560262, purchases: 2560262 },
        { rank: 5, productId: '138964', clicks: 2331370, favorites: 812879, cart: 1910706, purchases: 1910706 },
        { rank: 6, productId: '3031354', clicks: 138964, favorites: 1532046, cart: 1110402, purchases: 1110402 }
      ]
    };
  }

  componentDidMount() {
    console.log('右侧页面组件已加载 - 用户行为统计和商品数据');
    
    try {
      // 模拟数据更新
      this.dataUpdateTimer = setInterval(() => {
        this.updateBehaviorData();
      }, 45000); // 每45秒更新一次数据
      
      console.log('用户行为饼图数据:', this.state.behaviorPieData);
      console.log('Top商品数据:', this.state.topProductsData);
    } catch (error) {
      console.error('右侧页面数据加载失败:', error);
    }
  }

  componentWillUnmount() {
    if (this.dataUpdateTimer) {
      clearInterval(this.dataUpdateTimer);
    }
  }

  // 更新行为数据
  updateBehaviorData = () => {
    try {
      const { behaviorPieData } = this.state;
      const newData = behaviorPieData.map(item => ({
        ...item,
        value: Math.max(100, item.value + (Math.random() - 0.5) * 1000)
      }));
      
      this.setState({
        behaviorPieData: newData
      });
      
      console.log('用户行为数据已更新');
    } catch (error) {
      console.error('用户行为数据更新失败:', error);
    }
  }

  render() {
    const { behaviorPieData, topProductsData } = this.state;
    
    return (
      <RightPage>
        {/* 顶部 - 用户行为统计饼图 */}
        <RightTopBox>
          <div className='right-top-border'>
            <div className='right-top'>
              <CompactModuleTitle>
                <i className='iconfont'>&#xe7f7;</i>
                <span>用户行为统计</span>
              </CompactModuleTitle>
              <div className='right-top-content'>
                <UserBehaviorPie data={behaviorPieData} />
              </div>
            </div>
          </div>
        </RightTopBox>

        {/* 底部 - 不同行为Top10商品ID展示 */}
        <RightBottomBox>
          <BorderBox13 className='right-bottom-borderBox13'>
            <div className='right-bottom'>
              <CompactModuleTitle>
                <i className='iconfont'>&#xe88e;</i>
                <span>不同行为Top10商品ID展示</span>
              </CompactModuleTitle>
              <TopProductsTable data={topProductsData} />
            </div>
          </BorderBox13>
        </RightBottomBox>
      </RightPage>
    );
  }
}

export default index;
